<!doctype html>
<html class="theme-next use-motion ">
<head>
  

<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />








  <link rel="stylesheet" type="text/css" href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>



  <link href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>


<link rel="stylesheet" type="text/css" href="/css/main.css?v=0.4.5.1"/>




  <meta name="keywords" content="PHP,程序员,React,js" />



  <link rel="alternate" href="/atom.xml" title="Robbinhan's Blog" type="application/atom+xml" />



  <link rel="shorticon icon" type="image/x-icon" href="/favicon.ico?v=0.4.5.1" />


<meta property="og:type" content="website">
<meta property="og:title" content="Robbinhan's Blog">
<meta property="og:url" content="http://robbinhan.github.io/page/2/index.html">
<meta property="og:site_name" content="Robbinhan's Blog">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Robbinhan's Blog">


<script type="text/javascript" id="hexo.configuration">
  var CONFIG = {
    scheme: '',
    sidebar: 'post'
  };
</script>

  <title> Robbinhan's Blog </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="">

  <!--[if lte IE 8]>
  <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
      <img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
           alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
           style='margin-left:auto;margin-right:auto;display: block;'/>
    </a>
  </div>
<![endif]-->
  

  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?fb7093a406ece5b08b67a5501b5c6190";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <div class="container one-column 
   page-home 
">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><h1 class="site-meta">
  <span class="logo-line-before"><i></i></span>
  <a href="/" class="brand" rel="start">
      <span class="logo">
        <i class="icon-next-logo"></i>
      </span>
      <span class="site-title">Robbinhan's Blog</span>
  </a>
  <span class="logo-line-after"><i></i></span>
</h1>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu ">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            <i class="menu-item-icon icon-next-home"></i> <br />
            Startseite
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            <i class="menu-item-icon icon-next-archives"></i> <br />
            Archiv
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            <i class="menu-item-icon icon-next-tags"></i> <br />
            Tags
          </a>
        </li>
      

      
      
    </ul>
  

  
</nav>

 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content"> 
  <section id="posts" class="posts-expand">
    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/30/技术迭代/" itemprop="url">
                技术迭代
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-10-30T17:45:31+08:00" content="2015-10-30">
            2015-10-30
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/10/30/技术迭代/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/10/30/技术迭代/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>有段时间没写了，至于之前的react+redux项目后来就实现了右键菜单，然后在好雨云的日本亚马逊节点部署了下，因为我的代码中用到了Google的API，之前也一直在找海外节点的云服务商，正好在v2ex上看到，基本部署还是免费，客服支持也很及时，好评，好评，好评。</p>
<p>进入正题，今天看到之前关注的一个rails大牛表示放弃rails，而转到meteor，rails的社区好像正在走向末路，前几年还是很火的社区，这两年随着各种海外公司的应用，再弃之，包括rails框架本身的一些问题，有些停步不前，人气越来越少；感觉就像几年前的PHP社区，好在PHP现在有个laravel，社区的人气好像有多了起来，github上的star数也是近2w，在PHP框架中排最前，而且仅仅用了2两年不到的时间，所以也许rails或者说Ruby社区也会重新归来。</p>
<p>现在的服务端技术越来越多，热点也在不断的变化，以前是PHP、后来是rails，然后是nodejs，再来是golang，近期又是react、meteor等，这样频繁的变化，作为程序员的我们该怎么选择？像这样的问题大家网上Google下一大把，各种社区论坛都会有，每人都有自己的建议；在我看来不用去过多的猜测将来什么会火，什么会成为主流技术，只要跟随趋势，就和股票市场一样，尽量不要去抄底，博反弹，行情不好，怎么抄都不是底，而是应该跟随趋势，等到趋势、热点都确认了，你抄进去跟着吃点肉就好，大多数投资股票失败的都是想要抄底，但是也都死在『抄底』；当然技术圈可能不存在大行情不好的情况，但是热点确实不断在变的，我们要做的是热点确认后能快速掌握，灵活切换，这才是程序员的核心价值，能做到这点应该已经是大牛；但是作为兴趣爱好或者时间充裕多掌握些自然也不是坏事。^_^</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/10/01/Redux学习总结2/" itemprop="url">
                Redux学习总结2
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-10-01T16:23:19+08:00" content="2015-10-01">
            2015-10-01
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/10/01/Redux学习总结2/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/10/01/Redux学习总结2/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><div id="badge-container-robbinhan-master-undefined" class="hexo-github" style="width: 100%"></div>
<script src="/hexo-github/badge.js"></script>
<script type="text/javascript">
  loadStyle("/hexo-github/style.css");
  loadStyle("/hexo-github/octicons/octicons.css");
  new Badge("#badge-container-robbinhan-master-undefined", "robbinhan", "master", "", false);
</script>

<p>今天看到laracasts上的react视频，用react实现了一个简单的GistBox，正好我又在学redux，就试着react+redux做了个小Demo，顺便总结下遇到的坑。</p>
<p><img src="http://ww3.sinaimg.cn/large/6e0aaaa0gw1ewlpvh6nvxj205n0gz74v.jpg" alt="目录结构"></p>
<p>在<code>assets</code>目录下写代码，再通过gulp将代码实时编译到<code>public/js</code>下的<code>app.js</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> &#123; Provider &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</div><div class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">'./containers/App'</span>;</div><div class="line"><span class="keyword">import</span> configureStore <span class="keyword">from</span> <span class="string">'./store/store'</span>;</div><div class="line"></div><div class="line"><span class="keyword">const</span> store = configureStore;</div><div class="line"></div><div class="line">React.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">Provider</span> <span class="attr">store</span>=<span class="string">&#123;store&#125;</span> &gt;</span></span></div><div class="line">        &#123;() =&gt; <span class="tag">&lt;<span class="name">App</span> /&gt;</span> &#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">Provider</span>&gt;</span>,</div><div class="line">    <span class="built_in">document</span>.getElementById(<span class="string">'app'</span>));</div></pre></td></tr></table></figure>
<p><code>index.js</code>中将store传入<code>App</code>组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</div><div class="line"><span class="keyword">import</span> &#123; fetchGists,changeUserName &#125; <span class="keyword">from</span> <span class="string">'../actions/user'</span>;</div><div class="line"><span class="keyword">import</span> UserBox <span class="keyword">from</span> <span class="string">'../components/UserBox'</span>;</div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapStateToProps</span>(<span class="params">state</span>) </span>&#123;</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'connet state'</span>,state)</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">    username: state.gists.username,</div><div class="line">    items: state.gists.items || []</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapDispatchToProps</span>(<span class="params">dispatch</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">    handlerSubmit: (username) =&gt; dispatch(fetchGists(username)),</div><div class="line">    handlerChange: (username) =&gt; dispatch(changeUserName(username))</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(</div><div class="line">  mapStateToProps,</div><div class="line">  mapDispatchToProps</div><div class="line">)(UserBox);</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">'axios'</span>;</div><div class="line"><span class="comment">/*</span></div><div class="line"> * action types</div><div class="line"> */</div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">showGistsRequest</span> (<span class="params">username</span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">        type: <span class="string">'SHOW_GISTS_REQUEST'</span>,</div><div class="line">        username</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">showGistsSuccess</span> (<span class="params">username,json</span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">        type: <span class="string">'SHOW_GISTS_SUCCESS'</span>,</div><div class="line">        username,</div><div class="line">        posts: json.map(child =&gt; child.html_url),<span class="comment">//function(child)&#123;return child.data&#125;</span></div><div class="line">            receivedAt: <span class="built_in">Date</span>.now()</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">showGistsFail</span> (<span class="params">username</span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> &#123;</div><div class="line">        type: <span class="string">'SHOW_GISTS_FAIL'</span>,</div><div class="line">        username</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">changeUserName</span> (<span class="params">username</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">    type: <span class="string">'CHANGE_USER_NAME'</span>,</div><div class="line">    username</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="comment">// 来看一下我们写的第一个 thunk action creator！</span></div><div class="line"><span class="comment">// 虽然内部操作不同，你可以像其它 action creator 一样使用它：</span></div><div class="line"><span class="comment">// store.dispatch(fetchPosts('reactjs'));</span></div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">fetchGists</span>(<span class="params">username</span>) </span>&#123;</div><div class="line"></div><div class="line">  <span class="comment">// Thunk middleware 知道如何处理函数。</span></div><div class="line">  <span class="comment">// 这里把 dispatch 方法通过参数的形式参给函数，</span></div><div class="line">  <span class="comment">// 以此来让它自己也能 dispatch action。</span></div><div class="line"></div><div class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">dispatch</span>) </span>&#123;</div><div class="line"></div><div class="line">    <span class="comment">// 首次 dispatch：更新应用的 state 来通知</span></div><div class="line">    <span class="comment">// API 请求发起了。</span></div><div class="line"></div><div class="line">    dispatch(showGistsRequest(username));</div><div class="line"></div><div class="line">    <span class="comment">// thunk middleware 调用的函数可以有返回值，</span></div><div class="line">    <span class="comment">// 它会被当作 dispatch 方法的返回值传递。</span></div><div class="line"></div><div class="line">    <span class="comment">// 这个案例中，我们返回一个等待处理的 promise。</span></div><div class="line">    <span class="comment">// 这并不是 redux middleware 所必须的，但是我们的一个约定。</span></div><div class="line">    <span class="comment">// </span></div><div class="line">    axios.get(<span class="string">`https://api.github.com/users/<span class="subst">$&#123;username&#125;</span>/gists`</span>)</div><div class="line">    .then(response =&gt; response.data)</div><div class="line">    .then(<span class="function"><span class="keyword">function</span>(<span class="params">json</span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'response json'</span>,json); </div><div class="line">      dispatch(showGistsSuccess(username, json)); </div><div class="line">    &#125;).catch(<span class="function"><span class="keyword">function</span>(<span class="params">ex</span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(<span class="string">'parsing failed'</span>, ex)</div><div class="line">    &#125;)</div><div class="line"></div><div class="line">      <span class="comment">// 在实际应用中，还需要</span></div><div class="line">      <span class="comment">// 捕获网络请求的异常。</span></div><div class="line">  &#125;;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>connect</code>会将UserBox和store连接；在mapStateToProps中的state参数就是store.getState方法的返回值，mapDispatchToProps方法中定义了一些方法与dispatch绑定，这些方法和state都会通过props传递给子组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> GistForm <span class="keyword">from</span> <span class="string">'./GistForm'</span>;</div><div class="line"><span class="keyword">import</span> GistDiv <span class="keyword">from</span> <span class="string">'./GistDiv'</span>;</div><div class="line"><span class="keyword">import</span> &#123; fetchGists &#125; <span class="keyword">from</span> <span class="string">'../actions/user'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">UserBox</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  <span class="keyword">constructor</span>(props) &#123;</div><div class="line">    <span class="keyword">super</span>(props);</div><div class="line">  &#125;</div><div class="line"></div><div class="line">  render() &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      &lt;div className="userBox"&gt;</div><div class="line">        &lt;h1&gt;GistBox&lt;/h1&gt;</div><div class="line">        &lt;GistForm username=&#123;this.props.username&#125; </div><div class="line">        handlerSubmit=&#123;this.props.handlerSubmit&#125;   </div><div class="line">        handlerChange=&#123;this.props.handlerChange&#125; /&gt;</div><div class="line">        &lt;GistDiv items=&#123;this.props.items&#125; /&gt;</div><div class="line">      &lt;/div&gt;</div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>UserBox中将上层通过props传递的方法和参数传递给子组件处理</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">UserList</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">    </div><div class="line">  render() &#123;</div><div class="line">    <span class="keyword">let</span> self = <span class="keyword">this</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'gistform'</span>,self.props)</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      <span class="xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">onSubmit</span>=<span class="string">&#123;</span> <span class="attr">function</span>(<span class="attr">e</span>) &#123; <span class="attr">e.preventDefault</span>(); <span class="attr">self.props.handlerSubmit</span>(<span class="attr">self.props.username</span>) &#125; &#125; &gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">name</span>=<span class="string">"username"</span> </span></div><div class="line">        <span class="attr">value</span>=<span class="string">&#123;this.props.username&#125;</span> </div><div class="line">        <span class="attr">onChange</span>=<span class="string">&#123;(e)</span> =&gt; self.props.handlerChange(e.target.value)&#125; /&gt;</div><div class="line">        <span class="tag">&lt;<span class="name">button</span>&gt;</span>获取<span class="tag">&lt;/<span class="name">button</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">form</span>&gt;</span></div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> &#123; showGistsRequest,showGistsSuccess,showGistsFail &#125; <span class="keyword">from</span> <span class="string">'../actions/user'</span>;</div><div class="line"><span class="keyword">import</span> &#123; combineReducers &#125; <span class="keyword">from</span> <span class="string">'redux'</span>;</div><div class="line"><span class="comment">/**</span></div><div class="line"> * reducer中写每个action的业务逻辑</div><div class="line"> * @param  &#123;[type]&#125; state  [description]</div><div class="line"> * @param  &#123;[type]&#125; action [description]</div><div class="line"> * @return &#123;[type]&#125;        [description]</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">gets</span>(<span class="params">state = &#123;</span></span></div><div class="line">  isFetching: false,</div><div class="line">  items: []</div><div class="line">&#125;, action) &#123;</div><div class="line">  <span class="keyword">switch</span> (action.type) &#123;</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_REQUEST'</span>:</div><div class="line">    <span class="keyword">return</span> <span class="built_in">Object</span>.assign(&#123;&#125;, state, &#123;</div><div class="line">      isFetching: <span class="literal">true</span></div><div class="line">    &#125;);</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_SUCCESS'</span>:</div><div class="line">    <span class="keyword">return</span> <span class="built_in">Object</span>.assign(&#123;&#125;, state, &#123;</div><div class="line">      isFetching: <span class="literal">false</span>,</div><div class="line">      items: action.posts,</div><div class="line">      lastUpdated: action.receivedAt</div><div class="line">    &#125;);</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_FAIL'</span>:</div><div class="line">    <span class="keyword">return</span> <span class="built_in">Object</span>.assign(&#123;&#125;, state, &#123;</div><div class="line">      isFetching: <span class="literal">false</span></div><div class="line">    &#125;);</div><div class="line">  <span class="keyword">default</span>:</div><div class="line">    <span class="keyword">return</span> state;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">getGists</span>(<span class="params">state = &#123;username:'robbinhan',items:[]&#125;, action</span>) </span>&#123;</div><div class="line">  <span class="keyword">switch</span> (action.type) &#123;</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_REQUEST'</span>:</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_SUCCESS'</span>:</div><div class="line">  <span class="keyword">case</span> <span class="string">'SHOW_GISTS_FAIL'</span>:</div><div class="line">    <span class="keyword">return</span> <span class="built_in">Object</span>.assign(&#123;&#125;, state, gets(state[action.username], action) );</div><div class="line">    <span class="keyword">case</span> <span class="string">'CHANGE_USER_NAME'</span>:</div><div class="line">      <span class="keyword">return</span> <span class="built_in">Object</span>.assign(&#123;&#125;, state,&#123;</div><div class="line">        username: action.username</div><div class="line">      &#125;);</div><div class="line">  <span class="keyword">default</span>:</div><div class="line">    <span class="keyword">return</span> state;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"></div><div class="line"><span class="keyword">const</span> gistReducer = combineReducers(&#123;</div><div class="line">  gists : getGists</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> gistReducer;</div></pre></td></tr></table></figure>
<p>GistForm组件中在input修改输入内容时触发onChange事件，将value传给之前mapDispatchToProps中定义的handlerChange方法，handlerChange方法dispatch给action中的changeUserName方法，并通过reducer来修改state中的属性，onSubmit事件同理，只是其中使用了异步的处理方式，有关异步处理的具体说明请看<a href="http://camsong.github.io/redux-in-chinese/docs/advanced/AsyncActions.html" target="_blank" rel="external">官方手册</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">GistDiv</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">    </div><div class="line">  render() &#123;</div><div class="line">    <span class="keyword">let</span> self = <span class="keyword">this</span></div><div class="line">    <span class="keyword">let</span> row = self.props.items.map(<span class="function"><span class="keyword">function</span> (<span class="params">url,index</span>) </span>&#123;</div><div class="line">      <span class="keyword">return</span>  <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#123;url&#125;</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span>&#123;index&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></div><div class="line">    &#125;)</div><div class="line">    <span class="built_in">console</span>.log(row)</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">     <span class="xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></div><div class="line">      &#123; row &#125;</div><div class="line">     <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>GistDiv</code>组件就没什么好说的了，map处理items的数据，渲染出链接</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/30/Redux学习总结1/" itemprop="url">
                Redux学习总结1
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-09-30T07:31:27+08:00" content="2015-09-30">
            2015-09-30
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/09/30/Redux学习总结1/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/09/30/Redux学习总结1/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>首先Redux是flux思想的一种实现，他的概念中整个APP在runtime中只有一个全局的<code>store</code>，所有的<code>state</code>都存储在这个<code>store</code>，通过<code>action</code>来改变状态，当状态改变时触发对应的<code>reducer</code>，<code>reducer</code>函数实现对应<code>action</code>的业务逻辑，然后返回一个新的<code>state</code>对象，直接上示例代码解释。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//components/UserBox.js</span></div><div class="line"><span class="keyword">import</span> React, &#123; Component,PropTypes &#125; <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> UserList <span class="keyword">from</span> <span class="string">'../components/UserList'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">UserBox</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</div><div class="line">  render() &#123;</div><div class="line">    <span class="keyword">return</span> (</div><div class="line">      <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">"userBox"</span>&gt;</span></span></div><div class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>用户列表<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">UserList</span> <span class="attr">data</span>=<span class="string">&#123;this.props.data&#125;</span> /&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    );</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>Userbox是其中的一个子组件，再下一层的子组件就不一一贴出来了，学过react的应该都能理解UserList那行代码，那么其中的<code>this.props.data</code>这个数据从哪里来呢</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//containers/UserBox.js</span></div><div class="line"><span class="keyword">import</span> &#123; connect &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</div><div class="line"><span class="keyword">import</span> UserBox <span class="keyword">from</span> <span class="string">'../components/UserBox'</span>;</div><div class="line"></div><div class="line"><span class="comment">// Which part of the Redux global state does our component want to receive as props?</span></div><div class="line"><span class="comment">// 给子组件的props对象定义数据</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapStateToProps</span>(<span class="params">state</span>) </span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="string">'mapStateToProps'</span>,state)</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">    data: state.users</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="comment">// Which action creators does it want to receive by props?</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">mapDispatchToProps</span>(<span class="params">dispatch</span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> &#123;</div><div class="line">  &#125;;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(</div><div class="line">  mapStateToProps,</div><div class="line">  mapDispatchToProps</div><div class="line">)(UserBox);</div></pre></td></tr></table></figure>
<p>这里通过<code>react-redux</code>的<code>connect</code>模块与react的components连接，并传入<code>mapStateToProps</code>和<code>mapDispatchToProps</code>方法(关于connect的详细说明<a href="https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options" target="_blank" rel="external">看这里</a>)，<code>mapStateToProps</code>方法返回一个对象，<code>connet</code>会把这个对象的属性都map到子组件的<code>this.props</code>对象中，所以我在子组件可以通过<code>this.props.data</code>获取到这里的<code>state.users</code>；那么<code>mapStateToProps</code>方法接收的state参数是从哪里来的？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//reducers/user.js</span></div><div class="line"><span class="keyword">import</span> &#123; SET_VISIBILITY_FILTER,VisibilityFilters &#125; <span class="keyword">from</span> <span class="string">'../actions/user'</span>;</div><div class="line"><span class="keyword">import</span> &#123; combineReducers &#125; <span class="keyword">from</span> <span class="string">'redux'</span>;</div><div class="line"><span class="keyword">const</span> &#123; SHOW_ALL &#125; = VisibilityFilters;</div><div class="line"></div><div class="line"><span class="comment">/**</span></div><div class="line"> * reducer中写每个action的业务逻辑</div><div class="line"> * @param  &#123;[type]&#125; state  [description]</div><div class="line"> * @param  &#123;[type]&#125; action [description]</div><div class="line"> * @return &#123;[type]&#125;        [description]</div><div class="line"> */</div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">visibilityFilter</span>(<span class="params">state = SHOW_ALL, action</span>) </span>&#123;</div><div class="line">  <span class="keyword">switch</span> (action.type) &#123;</div><div class="line">  <span class="keyword">case</span> SET_VISIBILITY_FILTER:</div><div class="line">    <span class="keyword">return</span> action.filter;</div><div class="line">  <span class="keyword">default</span>:</div><div class="line">    state = [&#123;name:<span class="string">'robbin'</span>,id:<span class="number">1</span>&#125;,&#123;name:<span class="string">'moke'</span>,id:<span class="number">2</span>&#125;]</div><div class="line">    <span class="keyword">return</span> state;</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="keyword">const</span> userApp = combineReducers(&#123;</div><div class="line">  users : visibilityFilter</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> userApp;</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//store/store.js</span></div><div class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">'redux'</span>;</div><div class="line"><span class="keyword">import</span> userReducer <span class="keyword">from</span> <span class="string">'../reducers/user'</span>;</div><div class="line"></div><div class="line"><span class="keyword">let</span> userStore = createStore(userReducer);</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> userStore;</div></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//im.js</span></div><div class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;</div><div class="line"><span class="keyword">import</span> &#123; Provider &#125; <span class="keyword">from</span> <span class="string">'react-redux'</span>;</div><div class="line"><span class="keyword">import</span> UserBox <span class="keyword">from</span> <span class="string">'./containers/UserBox'</span>;</div><div class="line"><span class="keyword">import</span> userStore <span class="keyword">from</span> <span class="string">'./store/store'</span>;</div><div class="line"></div><div class="line">React.render(</div><div class="line">    <span class="xml"><span class="tag">&lt;<span class="name">Provider</span> <span class="attr">store</span>=<span class="string">&#123;userStore&#125;</span> &gt;</span></span></div><div class="line">        &#123;() =&gt; <span class="tag">&lt;<span class="name">UserBox</span> /&gt;</span> &#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">Provider</span>&gt;</span>,</div><div class="line">    <span class="built_in">document</span>.getElementById(<span class="string">'im'</span>));</div></pre></td></tr></table></figure>
<p>state其实就是reducer中返回的对象，我在user的reducer中返回了userApp，其中就包含了users属性，根据不同的action的type处理业务逻辑后，返回新的state对象；在store中将它封装起来，在im.js中import进来，render时通过provider将他传入组件。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/29/Laravel-React-Redux/" itemprop="url">
                Laravel+React+Redux
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-09-29T23:47:07+08:00" content="2015-09-29">
            2015-09-29
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/09/29/Laravel-React-Redux/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/09/29/Laravel-React-Redux/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><div id="badge-container-robbinhan-chat-42b19f5574beb7f6c76eb8f6575881d9641b99fe" class="hexo-github" style="width: 100%"></div>
<script src="/hexo-github/badge.js"></script>
<script type="text/javascript">
  loadStyle("/hexo-github/style.css");
  loadStyle("/hexo-github/octicons/octicons.css");
  new Badge("#badge-container-robbinhan-chat-42b19f5574beb7f6c76eb8f6575881d9641b99fe", "robbinhan", "chat", "42b19f5574beb7f6c76eb8f6575881d9641b99fe", false);
</script>

<p>之前93阅兵假期间，花了两天时间用laravel+vuejs+nodejs写了个实时聊天的的雏形。最近临近国庆放假想花些时间学习下react，目前初步把react都学习了一遍，学习过程中也了解到很多新的技术，例如虚拟dom，redux，babel，es5-shim，lodash等。</p>
<p>另外还有flux思想，flux不是个框架，是个架构思想，和mvc不同；redux是对flux思想的一种实现，其余比较火的还有reflux，但是最好还是都先了解下flux思想的内容，其余的实现主要是对facebook的flux使用的简化。</p>
<p>期间也踩过了许多坑之后有时间会再写一篇总结，这里先放些相关的资源链接。</p>
<ul>
<li><a href="http://www.tudou.com/plcover/ah20h1-t4V4/" target="_blank" rel="external">React.js中文视频教程，视频最好配合官网教程一起看</a></li>
<li><a href="https://facebook.github.io/react/" target="_blank" rel="external">官网教程(英文原版)</a></li>
<li><a href="http://reactjs.cn/react/index.html" target="_blank" rel="external">react中文教程</a></li>
<li><a href="http://react-china.org/" target="_blank" rel="external">react中文社区</a></li>
<li><a href="http://camsong.github.io/redux-in-chinese/" target="_blank" rel="external">redux文档(中文，英文原版在此链接终有)</a></li>
</ul>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/29/2015-05-16-learn-swift-1/" itemprop="url">
                用swift学习IOS开发的一点总结(一)
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-09-29T23:11:19+08:00" content="2015-09-29">
            2015-09-29
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/09/29/2015-05-16-learn-swift-1/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/09/29/2015-05-16-learn-swift-1/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>先列出总结的知识点</p>
<ul>
<li>?和！</li>
<li>as向下转换</li>
<li>var 和 let的区别</li>
<li>weak 和 unowned</li>
</ul>
<h2 id="和！"><a href="#和！" class="headerlink" title="?和！"></a>?和！</h2><blockquote>
<p>swift中的这点可能是借鉴了Ruby(或是其他语言，但是小弟懂的少，还有就是Apple内部好像蛮喜欢Ruby，不然也不会有MacRuby O(∩<em>∩)O~~</em>)；问号代表Optional，也可以认为是将这个值初始化为nil(nil这个对象代表空)，再后面写代码逻辑时需要对此值做if判断是否是nil。而！基本正好相反，它代表强制做某件事。</p>
<p>所以在开发时可能可能会遇到</p>
</blockquote>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">fatal error: unexpectedly found <span class="literal">nil</span> <span class="keyword">while</span> unwrapping an <span class="type">Optional</span> value</div></pre></td></tr></table></figure>
<blockquote>
<p>这种错误一般是运行中发生，表示在处理一个Optional的值，但是这个是nil</p>
</blockquote>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">bound value <span class="keyword">in</span> a conditional binding must be of <span class="keyword">optional</span> type</div></pre></td></tr></table></figure>
<blockquote>
<p>这种错误一般是编译时候发生，表示在if判断的时候遇到，因为判断的值不是Optional初始化过的。</p>
</blockquote>
<p><a href="http://letsswift.com/2014/06/swift-questionmark-exclamatorymark/" target="_blank" rel="external">详细讲解请看这篇转载</a></p>
<h2 id="as向下转型"><a href="#as向下转型" class="headerlink" title="as向下转型"></a>as向下转型</h2><blockquote>
<p>比方string to NSString 就用 as 转<br><a href="http://c.biancheng.net/cpp/html/2288.html" target="_blank" rel="external">Swift类型转换</a></p>
</blockquote>
<h2 id="var-和-let的区别"><a href="#var-和-let的区别" class="headerlink" title="var 和 let的区别"></a>var 和 let的区别</h2><blockquote>
<p>var声明变量，let声明常量</p>
</blockquote>
<h2 id="weak-和-unowned"><a href="#weak-和-unowned" class="headerlink" title="weak 和 unowned"></a>weak 和 unowned</h2><p><a href="http://swifter.tips/retain-cycle/" target="_blank" rel="external">内存管理，WEAK 和 UNOWNED</a></p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/29/2015-06-20-php-cli-exit/" itemprop="url">
                php在cli环境下的exit调用问题
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-09-29T23:11:19+08:00" content="2015-09-29">
            2015-09-29
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/09/29/2015-06-20-php-cli-exit/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/09/29/2015-06-20-php-cli-exit/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>  之前因为汇总数据，写了个shell脚本通过wget方式拉取日志，然后insert到MySQL中，后来由于各种问题重写了个PHP版本（其中各种问题这里就不提了，内部团队分享过）。</p>
<p>  但是仍然遇到了些问题，最奇葩的是进程莫名终止，由于脚本是crontab每分钟启动，终止也不是必现，可能几天就会出现一次，也可能几月出现一次。</p>
<p>后来怀疑可能是redis连接终端导致用于加锁的key没有删除，以至于后面启动的脚本执行失败，因为在发现此问题之前我在redis的server端设置30秒闲置就主动断开连接，而日志中显示程序也的确执行了30秒+；于是我就给程序加上一段ping的调用，希望保持连接，也算消停了一段时间。（我的脚本中通过redis给程序执行加锁，日志必须顺序导入，同一时间不能有多个程序执行）。</p>
<p>上周又发生了程序莫名终止的情况，后来我在恢复数据时偶然发现当第一个进程执行了超过一分钟时，第二个进程启动后由于判断到还有程序在执行要退出，调用了exit函数后第一个进程也随即终止了，我怀疑在cli下会不会调用exit会将所有执行中的命令行PHP程序退出？后来我修改成return就没发生类似问题。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/09/29/2015-05-28-chaogu-four-month-summary/" itemprop="url">
                炒股四月总结
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-09-29T23:11:19+08:00" content="2015-09-29">
            2015-09-29
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; in
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/投资/" itemprop="url" rel="index">
                  <span itemprop="name">投资</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/09/29/2015-05-28-chaogu-four-month-summary/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/09/29/2015-05-28-chaogu-four-month-summary/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>今年一月底开了户，正式步入了散户的行列，去年下半年开始只是买了些基金，收益很少，赶上这波牛市所以干错开户去了。起初是在雪球上各位大V推荐，先是买了些银行股，因为胆小买的很少，也就几十几十的赚，后来慢慢买的多了，因为觉得买的多赚的多，当中也被套，被套了心里总觉不好受，就恨不得分分钟刷雪球，希望看到某大V对该股进行评论，四个月来总收益也盈利了20%。</p>
<p>但是总结了下每股的收益发现对于我们这些新的小散在牛市里最好的赚钱方式就是在牛市开始时，找到牛市题材股，然后买题材股中的龙头或者最有潜力的低价股，等到牛市结束时最少也是翻倍的收益，但是其中的每个交易日是非常难熬的。</p>
<p>今日股市又暴跌，传说07年5月30日也是这样的暴跌，账户里仅存一只还是翻红的，考虑再三决定等这波行情起来解套后清仓，但还是会继续投资其他风险略低的品种，如ETF或者基金。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/05/10/2015-05-10-isset-and-array_key_exists/" itemprop="url">
                PHP中isset和array_key_exists的用发的区别
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-05-10T14:06:56+08:00" content="2015-05-10">
            2015-05-10
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; in
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/Development/" itemprop="url" rel="index">
                  <span itemprop="name">Development</span>
                </a>
              </span>

              
              
                . 
              

            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/Development/php/" itemprop="url" rel="index">
                  <span itemprop="name">php</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/05/10/2015-05-10-isset-and-array_key_exists/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/05/10/2015-05-10-isset-and-array_key_exists/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>平时在PHP判断数组中是否有某个key时都使用isset函数，今天偶然知道isset在判断时，如果key的值等于null时，isset的返回值会是false。这时就可以用上array_key_exists函数来判断，但是不要完全使用这个函数，会影响性能；可以这样写：<br><figure class="highlight php"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">isset</span>($a[$key])||array_key_exists($key,$a);</div></pre></td></tr></table></figure></p>
<p>这样既保留一定性能，也能避免程序中的坑。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2015/05/02/2015-05-02-api-to-jekyll/" itemprop="url">
                api系统设计
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2015-05-02T15:01:56+08:00" content="2015-05-02">
            2015-05-02
          </time>
        </span>

        
          <span class="post-category" >
            &nbsp; | &nbsp; in
            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/Development/" itemprop="url" rel="index">
                  <span itemprop="name">Development</span>
                </a>
              </span>

              
              
                . 
              

            
              <span itemprop="about" itemscope itemtype="https://schema.org/Thing">
                <a href="/categories/Development/php/" itemprop="url" rel="index">
                  <span itemprop="name">php</span>
                </a>
              </span>

              
              

            
          </span>
        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2015/05/02/2015-05-02-api-to-jekyll/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2015/05/02/2015-05-02-api-to-jekyll/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>公司API系统已经很陈旧，有很多潜在的隐患，所以趁着假期空闲准备重新设计套V2版的。框架已经确定，使用近期刚出的号称最快的PHP微系统<a href="http://lumen.laravel.com/" target="_blank" rel="external">lumen</a>，但是如何才是合格或者标准的API系统呢？</p>
<p>Google一番后在github上找到一份针对larval的api系统的<a href="https://github.com/dingo/api/wiki" target="_blank" rel="external">wiki</a>，可以借鉴参考。但是主要还得兼容V1版的一些东西，不然其他系统改动太大。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <header class="post-header">

      
      
        <h1 class="post-title" itemprop="name headline">
          
          
            
              <a class="post-title-link" href="/2014/10/25/2014-10-25-westward-journey/" itemprop="url">
                大话西游
              </a>
            
          
        </h1>
      

      <div class="post-meta">
        <span class="post-time">
          Veröffentlicht am
          <time itemprop="dateCreated" datetime="2014-10-25T15:55:00+08:00" content="2014-10-25">
            2014-10-25
          </time>
        </span>

        

        
          
            <span class="post-comments-count">
            &nbsp; | &nbsp;
            <a href="/2014/10/25/2014-10-25-westward-journey/#comments" itemprop="discussionUrl">
              <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2014/10/25/2014-10-25-westward-journey/" itemprop="commentsCount"></span>
            </a>
          </span>
          
        
      </div>
    </header>

    <div class="post-body">

      
      

      
        
          <span itemprop="articleBody"><p>曾经有一份真挚的爱情摆在我面前，但我没有珍惜，直到失去后才后悔莫及，人世间最痛苦的事莫过于此，如果上天能够给我一个再来一次的机会我会对那个女孩说我还你，如果非要在这份爱上加一个期限，我希望是一万年。<br>大话西游的台词每一个我们这代人都能背出来，看似喜剧的这部电影带给我们的却是一次次的感慨；20后重温大话西游，20年前是没有看，20年后是一个人看；影院里大家看第一部时都是欢乐，第二部越是接近片尾越是安静；每个人都已猜到结局，却又都不愿猜到结局。紫霞仙子与至尊宝一次次的在我们眼前痛苦分离，也许我们也一次次与曾经的爱人分手，当一生所爱音乐响起我还不愿离去，命运总是捉弄我们，我们又似命运的的狗，也许是我们懦弱，才将这一切归结于命运这个借口。</p>
</span>
        
      
    </div>

    <footer class="post-footer">
      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <a class="extend prev" rel="prev" href="/">&laquo;</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/18/">18</a><a class="extend next" rel="next" href="/page/3/">&raquo;</a>
  </nav>

 </div>

        

        
      </div>

      
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      <section class="site-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" src="/images/default_avatar.jpg" alt="robbinhan" itemprop="image"/>
          <p class="site-author-name" itemprop="name">robbinhan</p>
        </div>
        <p class="site-description motion-element" itemprop="description"></p>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">175</span>
              <span class="site-state-item-name">Artikel</span>
            </a>
          </div>

          <div class="site-state-item site-state-categories">
            
              <span class="site-state-item-count">8</span>
              <span class="site-state-item-name">Kategorien</span>
              
          </div>

          <div class="site-state-item site-state-tags">
            <a href="/tags">
              <span class="site-state-item-count">3</span>
              <span class="site-state-item-name">Tags</span>
              </a>
          </div>

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" rel="alternate">
              <i class="menu-item-icon icon-next-feed"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      

    </div>
  </aside>


    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner"> <div class="copyright" >
  
  &copy; &nbsp; 
  <span itemprop="copyrightYear">2016</span>
  <span class="with-love">
    <i class="icon-next-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">robbinhan</span>
</div>

<div class="powered-by">
  Erstellt mit  <a class="theme-link" href="http://hexo.io" rel="external nofollow">Hexo</a>
</div>

<div class="theme-info">
  Theme -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
    NexT
  </a>
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?79a704ba5a6d022fa4f136371be54aed";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

 </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  
  
    
    

  

    <script type="text/javascript">
      var disqus_shortname = 'robbinhan';
      var disqus_identifier = 'page/2/index.html';
      var disqus_title = '';
      var disqus_url = '';

      function run_disqus_script(disqus_script){
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      }

      run_disqus_script('count.js');
      
    </script>
  


  
  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/js/fancy-box.js?v=0.4.5.1"></script>


  <script type="text/javascript" src="/js/helpers.js?v=0.4.5.1"></script>
  

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/js/motion_global.js?v=0.4.5.1" id="motion.global"></script>




  <script type="text/javascript" src="/js/nav-toggle.js?v=0.4.5.1"></script>
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  

  <script type="text/javascript">
    $(document).ready(function () {
      if (CONFIG.sidebar === 'always') {
        displaySidebar();
      }
      if (isMobile()) {
        FastClick.attach(document.body);
      }
    });
  </script>

  

  
  

  
  <script type="text/javascript" src="/js/lazyload.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#posts").find('img').lazyload({
        placeholder: "/images/loading.gif",
        effect: "fadeIn"
      });
    });
  </script>
</body>
</html>
